<template>
  <div class="aui-card-list">
    <el-card shadow="never" class="aui-card-list-body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="status-1"></el-tab-pane>
        <el-tab-pane label="处理中" name="status1"></el-tab-pane>
        <el-tab-pane label="已结束" name="status2"></el-tab-pane>
        <el-tab-pane label="已驳回" name="status3"></el-tab-pane>
        <el-tab-pane label="草稿" name="status0"></el-tab-pane>
      </el-tabs>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="流程名称" clearable></el-input>
        </el-form-item>
        <el-form-item prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择表单类型">
            <el-option v-for="t in this.$getDictList('BPM_FORM_TYPE', false)" :key="t.val" :label="t.label" :value="t.val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="dataForm.bDate" type="date" :placeholder="$t('beginDate')" value-format="yyyy-MM-dd" style="width: 160px">
          </el-date-picker>
          -
          <el-date-picker v-model="dataForm.eDate" type="date" :placeholder="$t('endDate')" value-format="yyyy-MM-dd" style="width: 160px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()" type="primary">{{ $t('query') }}</el-button>
          <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element" remote-sort @sort-change="dataListSortChangeHandle" max-height="auto">
          <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
          <vxe-table-column field="name" title="名称" width="180"></vxe-table-column>
          <vxe-table-column field="type" title="所属类型" width="120" align="center">
            <template slot-scope="scope">
              {{$getDictLabel('BPM_FORM_TYPE', scope.row.type)}}
            </template>
          </vxe-table-column>
          <vxe-table-column field="currTaskName" title="当前审批环节"></vxe-table-column>
          <vxe-table-column field="createDate" title="创建时间" width="140" align="center"></vxe-table-column>
          <vxe-table-column field="updateDate" title="修改时间" width="140" align="center"></vxe-table-column>
          <vxe-table-column title="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="info">草稿</el-tag>
              <el-tag v-else-if="scope.row.status === 1" size="small" type="warning">处理中</el-tag>
              <el-tag v-else-if="scope.row.status === 2" size="small" type="success">已结束</el-tag>
              <el-tag v-else-if="scope.row.status === 3" size="small" type="danger">已驳回</el-tag>
              <el-tag v-else-if="scope.row.status === 4" size="small" type="info">已关闭</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column title="handle" header-align="center" align="left" fixed="right" width="140">
            <template slot-scope="scope">
              <!-- 草稿 -->
              <el-button v-if="scope.row.status === 0" type="text" size="small" @click="viewHandle(scope.row.formId,scope.row.bizId,scope.row.menuId,true)" icon="el-icon-edit">编辑
              </el-button>
              <!-- 草稿 -->
              <el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)" icon="el-icon-delete">删除
              </el-button>

              <el-button v-if="scope.row.status!== 0" type="text" size="small" @click="viewHistoricDetailHandle(scope.row.id,scope.row.procInstId,scope.row.formId,scope.row.bizId)" icon="el-icon-view">查看
              </el-button>
              <el-button v-if="scope.row.status === 3||scope.row.status === 4" type="text" size="small" @click="viewHandle(scope.row.formId,scope.row.bizId,scope.row.menuId,true)" icon="el-icon-edit">编辑
              </el-button>
              <el-button type="text" v-if="scope.row.noApproval" size="small" @click="recallHandle(scope.row.id)" icon="el-icon-bottom-left">撤回
              </el-button>
              <el-button type="text" v-else-if="scope.row.status === 1" size="small" @click="terminationProcess(scope.row.id)" icon="el-icon-circle-close">关闭
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      </div>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
// import { constants } from 'crypto'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/flowable/bpmProcBiz/page',
        getDataListIsPage: true,
        deleteURL: '/flowable/bpmProcBiz',
        deleteIsBatch: true
      },
      tableHeightHold: 42,
      dataForm: {
        name: '',
        status: null,
        type: ''
      },
      activeName: 'status-1'
    }
  },
  created () {
    // 初始化路由参数
    if (this.$route.params.status) {
      this.activeName = this.$route.params.status
      this.setStatus()
    }
  },
  methods: {
    setStatus () {
      if (this.activeName === 'status1') {
        this.dataForm.status = 1
      } else if (this.activeName === 'status2') {
        this.dataForm.status = 2
      } else if (this.activeName === 'status0') {
        this.dataForm.status = 0
      } else if (this.activeName === 'status3') {
        this.dataForm.status = 3
      } else {
        this.dataForm.status = null
      }
    },
    handleClick (tab, event) {
      this.activeName = tab.name
      this.setStatus()
      this.page = 1
      this.getDataList()
    },
    // 提交申请
    viewHandle (formId, bizId, menuId, edit) {
      this.$nextTick(() => {
        this.gotoRouteHandle(menuId, { formId: formId, bizId: bizId, edit: edit })
      })
    },
    printForm (formId, bizId, id) {
      this.$http.get(`/flowable/bpmFormDef/${formId}`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        if (!res.data || !res.data.printTemplateCode) {
          return this.$message.error('打印模板未配置，请联系管理员')
        }
        var params = {
          'templateCode': res.data.printTemplateCode,
          'printFormCode': id,
          'params': {
            'bizId': bizId,
            'name': res.data.name
          }
        }
        this.$http.post('/printService', params).then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          sessionStorage.setItem('_imgUrl', res.data)
          window.open('/pdfjs/web/viewer.html')
        }).catch(() => {
          this.$message.error('打印处理异常')
        })
      })
    },
    // 将返回的流数据转换为url
    getObjectURL (file) {
      let url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file)
        } catch (error) {
          console.log(error)
        }
      } else if (window.URL !== undefined) { // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {
          console.log(error)
        }
      }
      return url
    },
    // 撤回申请
    recallHandle (id) {
      this.$nextTick(() => {
        this.$confirm(this.$t('prompt.info', { 'handle': '撤回' }), this.$t('prompt.title'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$http.get(`/flowable/bpmProcBiz/recall/${id}`).then(({ data: res }) => {
            if (res.code !== 0) {
              return
            }
            this.$message({
              message: this.$t('prompt.success'),
              type: 'success',
              duration: 500,
              onClose: () => {
                if (this.mixinViewModuleOptions.treeType) {
                  this.getTreeDataList()
                } else {
                  this.getDataList()
                }
              }
            })
          }).catch(() => { })
        }).catch(() => { })
      })
    },
    // 关闭申请
    terminationProcess (id) {
      this.$nextTick(() => {
        this.$confirm(this.$t('prompt.info', { 'handle': '关闭' }), this.$t('prompt.title'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$http.get(`/flowable/bpmProcBiz/terminationProcess/${id}`).then(({ data: res }) => {
            if (res.code !== 0) {
              return
            }
            this.$message({
              message: this.$t('prompt.success'),
              type: 'success',
              duration: 500,
              onClose: () => {
                if (this.mixinViewModuleOptions.treeType) {
                  this.getTreeDataList()
                } else {
                  this.getDataList()
                }
              }
            })
          }).catch(() => { })
        }).catch(() => { })
      })
    },
    viewHistoricDetailHandle (procBizId, procInstId, formId, bizId) {
      this.$nextTick(() => {
        var router = {
          name: 'process-history',
          id: procInstId,
          menuId: this.$route.meta.menuId,
          oldName: 'flowable-bpmProcBiz',
          path: 'flowable/process-history',
          title: '流程进度详情'
        }

        var params = {
          procBizId: procBizId,
          procInstId: procInstId,
          formId: formId,
          formFlag: true,
          bizId: bizId
        }
        this.$options.methods.openNewTab(this.$router, router, params)
      })
    },
    gotoRouteHandle (menuId, params) {
      console.log(params)
      let route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
      console.log(route.params)
      if (route) {
        this.$router.push({ name: route.name, params: params || route.params })
      }
    }
  },
  components: {}
}
</script>
